/**
 * @name VideoPlayer
 * @desc web端直播流视频播放
 * @author darcrand
 * @version 2018-11-19
 */

import React, { Component } from 'react'
import './styles.css'

const rtmp = 'rtmp://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1'
const hls = 'http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.m3u8'

class VideoPlayer extends Component {
    componentDidMount() {
        window.videojs('video-a')
        window.videojs('video-b')
    }

    render() {
        return (
            <div>
                <h1>hls 直播流</h1>
                <video
                    id="video-a"
                    className="video-js vjs-default-skin"
                    controls={true}
                    autoPlay={true}
                    preload="none"
                >
                    <source src={hls} type="application/x-mpegURL" />
                </video>

                <hr />

                <h1>rtmp 直播流</h1>
                <video
                    id="video-b"
                    className="video-js vjs-default-skin"
                    controls={true}
                    autoPlay={true}
                    preload="none"
                >
                    <source src={rtmp} type="rtmp/flv" />
                </video>
            </div>
        )
    }
}

export default VideoPlayer
